<template>
    <div class="login-panel">
        <img src="../assets/logo.png" class="logo"/>
        <h2 class="title">重庆市地理信息中心综合办公平台</h2>
        <div class="form">
            <div class="input-container">
                <div class="input-cell">
                    <i class="oa-icon icon-yonghu"></i><input @input="checkSubmit" type="text" ref="username"
                                                              v-model="username" placeholder="账号">
                </div>
                <div class="input-cell">
                    <i class="oa-icon icon-mima"></i><input @input="checkSubmit" type="password" ref="password"
                                                            v-model="password" placeholder='登录密码'>
                </div>
            </div>

            <cube-button class="btn-default" @click="login" :disabled="disabled" :primary="true">登录</cube-button>
        </div>
        <div class="device_no">
            <span class="tips">设备号</span>
            <label id="device_no">{{device_no}}</label>
        </div>
        <p class="copy-right">© 重庆市地理信息中心</p>
        <a href="tel:13436151269" class="copy-support">支持电话：13436151269</a>
    </div>
</template>

<script>
    import {getConfig, getTokenInfo, saveTokenInfo, saveUserInfo, getUserInfo} from '../config';

    export default {
        name: "login",
        data() {
            return {
                username: "",
                password: "",
                disabled: true,
            }
        },

        computed: {
            device_no() {
                return this.$store.state.uuid
            }
        },
        created() {

        },
        mounted() {
            let userInfo = getUserInfo();
            this.username = userInfo ? userInfo.username : "";
            this.password = userInfo ? userInfo.password : "";
            this.checkSubmit();
        },
        methods: {
            checkSubmit: function () {
                if (this.username && this.password) {
                    this.disabled = false;
                } else {
                    this.disabled = true;
                }
            },
            login() {

                if (this.username == "") {
                    this.$createToast({
                        txt: '请输入账号',
                        type: 'warn',
                        time: 1500
                    }).show();
                    // this.$refs.username.focus();
                    return false;
                }
                if (this.username == "") {
                    this.$createToast({
                        txt: '请输入密码',
                        type: 'warn',
                        time: 1500
                    }).show();
                    // this.$refs.password.focus();
                    return false;
                }
                if ((this.username == "config") && (this.password == "config")) {
                    this.$router.push('/config');
                    return;
                }
                let userInfo = getUserInfo();
                userInfo = {
                    isLogin: false,
                    username: this.username,
                    password: this.password
                };
                saveUserInfo(userInfo);
                const toast = this.$createToast({
                    time: 0,
                    txt: '正在登录'
                })
                toast.show();
                let config = getConfig();

                this.$get(`${config.rootUrl}/Token/AppLogon`, {
                    username: this.username,
                    password: this.password,
                    deviceid: this.device_no
                }).then((res) => {
                    console.info(res);
                    toast.hide();
                    if (res.Error) {
                        this.$createToast({
                            txt: res.Message,
                            type: 'error',
                            time: 1500
                        }).show();
                    } else {
                        //alert(JSON.stringify(ret));
                        userInfo.isLogin = true;
                        this.$store.commit("updateLogin", {is_login: true});
                        this.$store.commit("updateUserInfo", {userInfo:userInfo});
                        saveUserInfo(userInfo);
                        saveTokenInfo(res.Data);
                        this.$createToast({
                            txt: res.Message,
                            type: 'error',
                            time: 1500
                        }).show();
                        this.$router.push('/');
                        try {
                            window.JPush.setAlias({
                                    sequence: 1,
                                    alias: getTokenInfo().userInfo.ID
                                },
                                function (result) {
                                    //consoel.info(result.alias);
                                    console.info("setAlias:", result);
                                },
                                function (error) {
                                    console.log(error.code);
                                });
                        }catch (e){
                            console.log(e);
                        }
                    }
                }).catch((error)=>{
                    this.$createToast({
                        txt: '网络错误',
                        type: 'error',
                        time: 1500
                    }).show();
                })

            }
        }
    }
</script>

<style lang="less">
    @import "../assets/style/theme";

    input {
        border: none;
        outline: none;

    }
    .login-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
    }

    .logo {
        width: 120px;
        height: 120px;
        margin-top: 64px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        border-radius: 50%;
    }

    .title {
        font-size: 18px;
        color: #343a40;
        margin: 0;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .form {
        width: 100%;
        display: flex;
        margin-top: 16px;
        flex-direction: column;
        align-items: center;
        .input-container {
            background: #ffffff;
            border-radius: 5px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            border: solid 1px @app-border-color;
            .input-cell {
                display: flex;
                flex-direction: row;
                padding-left: 24px;
                padding-right: 24px;
                border-bottom: solid 1px @app-border-color;
                &:last-child {
                    border-bottom: none;
                }
                &.disabled {
                    background: #f0f0f0;
                }
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    background: none;
                    font-size: 15px;
                }
                .oa-icon {
                    font-size: 18px;
                    margin-right: 12px;
                }
                font-size: 15px;
                line-height: 40px;
                height: 40px;
                color: #343a40;

            }
        }
        .btn-default {
            /*height: 44px;*/
            width: 90%;
            margin-top: 32px;
            background:@app-theme-color;
            &:active {
                background: darken(@app-theme-color, 10%);
            }
        }
    }

    .copy-right {
        font-size: 12px;
        color: #888888;
        margin: 0;
        margin-top: 64px;

    }
    .copy-support {
        font-size: 12px;
        color: #888888;
        margin: 0;
        margin-top: 20px;

    }
    .device_no {
        margin-top: 40px;
        font-size: 13px;
        color: #888888;
        display: flex;
        flex-direction: column;
        align-items: center;

        .tips {
            color: #4a5c63;
            margin-bottom: 16px;
        }
    }

</style>